<!--  -->
<template>
    <div class='' v-loading="loading" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.1)">
        <div class="item">
            <el-form ref="headerForm" :model="form" label-width="160px" :rules="rules">
                <el-form-item label="司机姓名">
                    <el-input class="custom-input" type="text" v-model="form.user_name" :disabled="true"
                        placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input class="custom-input" type="text" v-model="form.mobile" :disabled="true"
                        placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-input class="custom-input" type="text" v-model="form.cph" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车架号">
                    <el-input class="custom-input" type="text" v-model="form.car_jh" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车辆类型">
                    <el-input class="custom-input" type="text" v-model="form.car_lx" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车辆品牌">
                    <el-input class="custom-input" type="text" v-model="form.car_pp" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车辆能源类型">
                    <!-- <el-input class="custom-input" type="text" v-model="form.energy" placeholder=""></el-input> -->
                    <el-select v-model="form.energy" placeholder="选择能源类型" @change="changeStatusSelect">
                        <el-option v-for="item in carConfig.energy" :label="item.label" :value="item.value"
                            :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车牌颜色">
                    <!-- <el-input class="custom-input" type="text" v-model="form.is_zhu" placeholder=""></el-input> -->
                    <el-select v-model="form.color" placeholder="选择车牌颜色" @change="changeStatusSelect">
                        <el-option v-for="(item, key) in carConfig.color" :label="item" :value="key"
                            :key="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车辆所有人">
                    <el-input class="custom-input" type="text" v-model="form.syr" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="使用性质">
                    <el-input class="custom-input" type="text" v-model="form.syxz" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="载重量(kg)" prop="kzz">
                    <el-input class="custom-input" type="number" v-model="form.kzz" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="发证机关" prop="IssuingOrganizations">
                    <el-input class="custom-input" type="text" v-model="form.IssuingOrganizations"
                        placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="注册日期" prop="RegisterDate">
                    <el-input class="custom-input" type="text" v-model="form.RegisterDate" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="发证日期" prop="IssueDate">
                    <el-input class="custom-input" type="text" v-model="form.IssueDate" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="行驶证有效期" prop="xszdq">
                    <!-- <el-input class="custom-input" type="text" v-model="form.xszdq" placeholder=""></el-input> -->

                    <el-date-picker
                        value-format="yyyy-MM"
                        v-model="date1"
                        type="month"
                        placeholder="行驶证有效期"
                        @change="dateChange"
                        >
                    </el-date-picker>


                </el-form-item>
                <el-form-item label="道路运输证号" prop="dlys_num" class="road-formitem">
                    <el-input class="custom-input" type="text" v-model="form.jiaoyunguan" placeholder="交运管"></el-input>
                    <el-input class="custom-input" type="text" v-model="form.zi" placeholder="字"></el-input>

                    <el-input class="custom-input" type="text" v-model="form.dlys_num" placeholder="请输入号">
                        <template slot="prepend"><span style="color: red;margin-left: 5px;">*</span></template>
                    </el-input>
                </el-form-item>
                <el-form-item label="地址" prop="id_end_date">
                    <el-input class="custom-input" type="text" v-model="form.address" placeholder=""></el-input>
                </el-form-item>
   
                <el-form-item label="挂车车牌号" prop="trailer">
                    <el-input class="custom-input" type="text" v-model="form.trailer" placeholder=""></el-input>
                </el-form-item>
                   
                <el-form-item label="经营许可证号" prop="business_license">
                    <el-input class="custom-input" type="text" v-model="form.business_license" placeholder="经营许可证号"></el-input>
                </el-form-item>
                                   
                <el-form-item label="实际承运人证件号码" prop="credit_code">
                    <el-input class="custom-input" type="text" v-model="form.credit_code" placeholder="实际承运人证件号码"></el-input>
                </el-form-item>
                <el-form-item label="司机身份证" prop="sfz">
                    <el-input class="custom-input" type="text" readonly v-model="form.sfz" placeholder="司机身份证"></el-input>
                </el-form-item>
            </el-form>


            <div class="imgs-box">
                <div class="box" style="width: 30%;">
                    <div>行驶证正面：</div>
                    <!-- <el-image-custom style="" :viewerCustom="true" :src="form.xszz" :fit="'cover'"
                        :preview-src-list="[form.xszz]"></el-image-custom> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.xszz"
                        :fit="'cover'" :preview-src-list="[form.xszz]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'xszz'" @getImageList="getImageList" :imageList="[form.xszz]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;">
                    <div>行驶证附页正面：</div>
                    <!-- <el-image-custom style="width: 300px; height: 250px" :src="form.xszf" :fit="'cover'"
                        :preview-src-list="[form.xszf]" :viewerCustom="true"></el-image-custom> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.xszf"
                        :fit="'cover'" :preview-src-list="[form.xszf]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'xszf'" @getImageList="getImageList" :imageList="[form.xszf]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;">
                    <div>行驶证附页反面：</div>
                    <!-- <el-image-custom :viewerCustom="true" style="width: 300px; height: 250px" :src="form.xszff"
                        :fit="'cover'" :preview-src-list="[form.xszff]"></el-image-custom> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.xszff"
                        :fit="'cover'" :preview-src-list="[form.xszff]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'xszff'" @getImageList="getImageList" :imageList="[form.xszff]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;">
                    <div>运输经营许可证：</div>
                    <!-- <el-image-custom :viewerCustom="true" style="width: 300px; height: 250px" :src="form.ysjyxkz"
                        :fit="'cover'" :preview-src-list="[form.ysjyxkz]"></el-image-custom> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.ysjyxkz"
                        :fit="'cover'" :preview-src-list="[form.ysjyxkz]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'ysjyxkz'" @getImageList="getImageList"
                            :imageList="[form.ysjyxkz]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;">
                    <div>挂车行驶证：</div>
                    <!-- <el-image-custom :viewerCustom="true" style="width: 300px; height: 250px" :src="form.guaimg"
                        :fit="'cover'" :preview-src-list="[form.guaimg]"></el-image-custom> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.guaimg"
                        :fit="'cover'" :preview-src-list="[form.guaimg]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'guaimg'" @getImageList="getImageList"
                            :imageList="[form.guaimg]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;visibility: hidden;">
                    1
                </div>
            </div>

            <div class="dialog-footer" >
                <!-- <el-button type="danger" @click="$emit('save', { ...form, status: 2 })">不通过</el-button> -->
                <el-button type="danger" @click="submitForm('headerForm', 2)" v-if="[0,2,3].includes(form.status)">不通过</el-button>
                <el-button type="primary" @click="submitForm('headerForm', 1)" v-if="[0,1,2,3].includes(form.status) || showPassBtn">{{ showPassBtn ? '保存' : '通过' }}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getHeader } from '@/utils/tool';
import {getBusinessNumber,getCreditCode} from "@/api/businessUser/carAuditing";
import uploadImgPrevDriver from "@/components/uploadImgPrevDriver/index.vue";
import axios from 'axios';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        uploadImgPrevDriver
    },
    props: ['form', "carConfig"],
    data() {
        //这里存放数据
        return {
            date1:'',//行驶证有效期
            rules: {
                kzz: [
                    { required: true, message: '请输入载重量', trigger: ['blur'] },
                ],
                IssuingOrganizations: [
                    { required: true, message: '请输入发证机关', trigger: ['blur'] }
                ],
                RegisterDate: [
                    { required: true, message: '请输入注册日期', trigger: ['blur'] }
                ],
                IssueDate: [
                    { required: true, message: '请输入发证日期', trigger: ['blur'] }
                ],
                xszdq:[
                    { required: true, message: '请选择行驶证有效期', trigger: ['change'] }
                ],
                business_license: [
                    { required: true, message: '请输入经营许可证号', trigger: ['blur'] }
                ],
                credit_code:
                [
                    { required: true, message: '请输入实际承运人证件号码', trigger: ['blur'] }
                ],
            },
            loading: false,
            showPassBtn:false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
    },
    //方法集合
    methods: {
        dateChange(val){
            console.log('选中的行驶证有效期日期',val);
            this.form.xszdq = val;
        },
        submitForm(formName, status) {
            if (status == 2) {
                this.$emit('reject', { id: this.form.id, user_id: this.form.user_id, status })
                return;
            }
            if((this.form.dlys_num + ''.length) < 12){
                this.$message.error('道路运输证号不能小于12位！');
                return;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.form.dlys_num) {
                        this.$message.error('请输入道路运输证号')
                        return;
                    }
                    if (status == 1) {
                        this.$emit('save', { ...this.form, status })
                    }
                } else {
                    this.$message.error('请输入车辆信息')
                    return false;
                }
            });
        },
        changeStatusSelect(item) {
            console.log(item);
        },
        getImageList(list, index) {
            console.log(list[0]);
            if (list[0].name == 'xszz') {
                this.loading = true;
                this.form.xszz = list[0].url;
                axios({
                    url: `https://api.zhgylgl.com/api/common/idCardIdentification?img=${list[0].url}&type=4`,
                    methods: 'get',
                    headers: getHeader()
                }).then(res => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        let { Address, EngineNumber, IssueDate, Model, Owner, PlateNumber, RegisterDate, UseCharacter, VehicleType, Vin } = res.data.data;
                        this.form.address = Address;
                        this.form.cph = PlateNumber;
                        this.form.car_jh = Vin;
                        this.form.syxz = UseCharacter;
                        this.form.syr = Owner;
                        this.form.car_pp = Model;
                        this.form.RegisterDate = RegisterDate;
                        this.form.IssueDate = IssueDate;
                        this.form.car_lx = VehicleType;
                        // console.log(this.form, "-------", res.data.data);
                    }
                })
            } else if (list[0].name == 'xszf') {
                this.loading = true;
                this.form.xszf = list[0].url;
                axios({
                    url: `https://api.zhgylgl.com/api/common/idCardIdentification?img=${list[0].url}&type=5`,
                    methods: 'get',
                    headers: getHeader()
                }).then(res => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        console.log(this.carConfig.energy);
                        let index = this.carConfig.energy.findIndex(item => {
                            return item.label == res.data.data.EnergyType
                        });
                        this.form.energy = this.carConfig.energy[index].value;
                        this.form.kzz = res.data.data.TractionMass.replace('kg', "");
                    }
                })
            } else if (list[0].name == 'xszff') {
                this.form.xszff = list[0].url;
            } else if (list[0].name == 'ysjyxkz') {
                this.form.ysjyxkz = list[0].url;
            } else if (list[0].name == 'guaimg') {
                this.form.guaimg = list[0].url;
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    async mounted() {
        let dateVal = this.form.xszdq || '';
        console.log('dateVal',this.form,dateVal);
        if(!this.form.business_license){
            if(this.form.status == 0){
                if((this.form.syr + '').indexOf('公司')!= -1){
                    //待审核状态 走接口回显经营许可证号
                    let result = await getBusinessNumber({
                        transport_company:this.form.syr
                    });
                    if(result.code == 200 && result.data){
                        let business_license = result.data.business_license;
                        let credit_code = result.data.credit_code;
                        if(business_license){
                            this.form.business_license = business_license;
                        }
                        if(credit_code){
                            this.form.credit_code = credit_code;
                        }
                    }
                }
            }else{
                //如果经营许可证号不存在 放开通过按钮
                this.showPassBtn = true;
            }
   
        }
        
        this.date1 = dateVal.replace("年","-").replace('月','');

        if (this.form.IssuingOrganizations == "") {
            this.form.IssuingOrganizations = this.form.json['发证单位'];
        }

        if (Object.values(this.form.json).every((val) => val == null)) {
            this.getImageList([{
                name: "xszz",
                url: this.form.xszz
            }])
        }
        if (Object.values(this.form.json1).every((val) => val == null)) {
            this.getImageList([{
                name: "xszf",
                url: this.form.xszf
            }])
        }

        //判断是否有社会信用代码 没有的话从接口获取
        if (!this.form.credit_code && this.form.syr.length > 4) {
            getCreditCode({
                company: this.form.syr
            }).then(res => {
                if(res.code == 200){
                    this.form.credit_code = res.data.credit_code
                }
            })
        }

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.item {
    width: 100%;

    &>.el-form {
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            width: 33%;
        }

        ::v-deep .el-input.is-disabled .el-input__inner {
            background-color: #fff !important;
            /* 背景色 */
            border-color: #dcdfe6 !important;
            /* 边框色 */
            color: #606266 !important;
            /* 文本颜色 */
            cursor: not-allowed;
            /* 鼠标指针样式 */
        }

        ::v-deep .el-input-group__prepend {
            padding: 0 10px;
        }

        .road-formitem {

            ::v-deep .el-input:first-child,
            ::v-deep .el-input:nth-of-type(2) {
                width: 30%;
            }
        }

        .tool {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .sureBtn {
                width: 250px;
            }
        }
    }

    .imgs-box {
        width: 100%;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;


        &>.box {
            width: 50%;
            display: flex;
            white-space: nowrap;
            margin: 10px 0;

            ::v-deep .el-image {
                width: 300px;
                height: 250px;
                border-radius: 6px;
            }

            &>div:first-child {
                width: 112px;
            }

            &>.info-box {
                width: 300px;
                height: 100%;

                ::v-deep .el-form-item {
                    margin-bottom: 5px;
                }
            }
        }


    }
}

::v-deep .el-form-item__content {
    display: flex;
    height: 100%;

    .custom-input {
        width: 100%;
    }

    .el-select {
        width: 100%;
    }

    .el-input {
        width: 100%;
    }

    .el-button {
        margin-left: 20px;
        background-color: $theme-primary;
        color: #fff;
        border: none;
        // border-radius: 20px;
    }

    .el-radio {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>